<template>
	<tm-app ref="app">


		<view class="my-bg">
			<image src="https://www.zhaobangyang.cn/img/base/main-bg.svg"></image>
		</view>
		<view class="flex flex-row">
			<view style="padding-top: 2em;padding-left: 1em;padding-bottom: 2em;">
				<tm-avatar border="0" color="white" :size="160" :round="15" :img="avatarUrl"></tm-avatar>
			</view>
			<view style="margin-top: 120rpx;margin-left: 40rpx;">
				<tm-button v-if="vxflag" @click="sqrq()" color="white" text size="normal" outlined
					label="Login"></tm-button>
			</view>
		</view>


		<tm-divider color="black" font-color="black" realColor align="left" :border="2" style="margin-top: 30rpx;"
			label="order detail"></tm-divider>
		<view class="mb-32 mx-32 round-3 overflow" style="margin-top: 0rpx;">
			<tm-cell bottomBorder :margin="[0, 0]" :titleFontSize="30" title="order" @click="jzload()"> </tm-cell>
			<tm-cell bottomBorder :margin="[0, 0]" :titleFontSize="30" title="address" @click="bsload()"> </tm-cell>
		</view>


		<tm-divider color="black" font-color="black" realColor align="left" :border="2" style="margin-top: 30rpx;"
			label="contact us"></tm-divider>
		<tm-cell bottomBorder :margin="[0, 0]" :titleFontSize="30" title="email:">
			<template v-slot:right>
				<tm-text label="yushuaixm@163.com"></tm-text>
			</template>
		</tm-cell>
		<tm-cell bottomBorder :margin="[0, 0]" :titleFontSize="30" title="instagram:">
			<template v-slot:right>
				<tm-text label="yushuaixiaomei@gmail.com"></tm-text>
			</template>
		</tm-cell>
		<tm-cell bottomBorder :margin="[0, 0]" :titleFontSize="30" title="wechat:">
			<template v-slot:right>
				<tm-text label="yushuaijinxiao"></tm-text>
			</template>
		</tm-cell>

		<tm-sheet>
			<tm-text fontSize="20" :label="userid"></tm-text>
		</tm-sheet>
		<tm-tabbar :autoSelect="false" v-model:active="acc">
			<tm-tabbar-item @click="acc=0" activeColor="orange" url='/pages/index/index' open-type='reLaunch'
				text="home" icon='tmicon-md-home'></tm-tabbar-item>
			<tm-tabbar-item @click="acc=1" activeColor="orange" url='/pages/index/my' text="my" unicon="tmicon-account"
				icon="tmicon-userplus-fill"></tm-tabbar-item>
		</tm-tabbar>



		<tm-overlay v-model:show="showWin" contentAnimation>
			<tm-image :width="600" :height="600" :src="tjmImg"> </tm-image>
			<view class="flex flex-row flex-wrap">
				<tm-button open-type="share" color="green" icon="tmicon-account" :width="86" :round="10" :height="86"
					:fontSize="40" :margin="[10]" :shadow="0" text size="normal"></tm-button>
				<tm-icon :font-size="90" name="https://www.zhaobangyang.cn/img/1.png" @click="sharimg"></tm-icon>
				<button class="mini-btn" type="default" size="mini" @click="save">
					<text class="text-center">保存</text>
				</button>
				<tm-icon style="margin-left: 100rpx;" :font-size="90" name="https://www.zhaobangyang.cn/img/2.png"
					@click="clsDeig"></tm-icon>
			</view>
		</tm-overlay>
		<tm-message ref="msg" :lines="5"></tm-message>
	</tm-app>
</template>

<script lang="ts" setup>
	import { ref } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import { log } from "console";
	import { qWxUserById, isGetBsStatus } from '@/api/my'
	import tmMessage from "@/tmui/components/tm-message/tm-message.vue";
	import { isEmpty } from "@/tmui/tool/function/util";


	const msg = ref<InstanceType<typeof tmMessage> | null>(null)
	const acc = ref(1)
	const vxflag = ref(true);
	const flag = ref(true);
	const bsflag = ref(false);
	const jzflag = ref(false);
	const avatarUrl = ref('http://www.tkgwu.com/img/lo.jpg');
	const nickname = ref('')
	const userid = ref('');
	const offset = ref(0);
	const bsFlag = ref(false);
	const tjmImg = ref('');
	const showWin = ref(false);
	// const bbcard = ref('');


	onLoad(() => {
		userid.value = uni.getStorageSync("userid");
		// console.log('初始化程序加载数据！', userid.value);
		if (!isEmpty(userid.value)) {
			vxflag.value = false;
			// bbcard.value = 'NO:'+userid.value;
			loadUserData();
			let code = uni.getStorageSync("code");
			// console.log(code);
			if (code === "1") {
				flag.value = false;
				bsflag.value = false;
				jzflag.value = true;
			}
			if (code === "0") {
				flag.value = false;
				bsflag.value = true;
				jzflag.value = false;
			}
			isLoadBsStatus();
		}
	})

	const sharimg = async () => {
		console.log('vvvvv');
		uni.share({
			provider: "weixin",
			scene: "WXSceneTimeline",
			type: 2,
			imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
			success(res) {
				console.log("success:", JSON.stringify(res));
			},
			fail(err) {
				console.log("fail:", JSON.stringify(err));
			}
		});

	}

	function save() {
		uni.getSetting({
			success: (res) => {
				if (res.authSetting['scope.writePhotosAlbum']) {
					saveImageToPhotos();
				} else {
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							saveImageToPhotos();
						},
						fail: () => {
							uni.showToast({
								title: "请打开保存相册权限，再点击保存相册分享",
								icon: "none",
								duration: 3000
							});
						}
					})
				}
			}
		})
	}
	function saveImageToPhotos() {
		uni.downloadFile({
			url: tjmImg.value,
			success: (res) => {
				let savedFilePath = res.tempFilePath;
				uni.saveImageToPhotosAlbum({
					filePath: savedFilePath,
					success: (res6) => {
						uni.showToast({
							title: '成功保存到相册',
							icon: 'none',
							duration: 3000
						});
					},
					fail: (err) => {
						console.error('图片保存失败', err);
					}
				});
			},
			fail: (err) => {
				console.error('下载失败', err);
			}
		});
	}
	function zstjm() {
		showWin.value = true;
	}

	function clsDeig() {
		showWin.value = false;
	}

	function loadXyContent() {
		uni.navigateTo({
			url: `/pages/news/xynews?id=9`
		})
	}

	const isLoadBsStatus = async () => {
		let param = { "wxid": userid.value };
		// console.log(JSON.stringify(param));
		const result = await isGetBsStatus(param);
		// console.log(JSON.stringify(result));
		if (result.status === "1") {
			bsFlag.value = true;
		}
	}


	const loadUserData = async () => {
		let param = { "id": userid.value };
		const result = await qWxUserById(param);
		console.log(JSON.stringify(result));
		// avatarUrl.value = result.avatar;
		nickname.value = result.nickname;
		tjmImg.value = result.tgimg;
	}

	function clearJs() {
		uni.setStorageSync("userid", "");
		uni.setStorageSync("code", "");
		if (isEmpty(uni.getStorageSync("userid"))) {
			msg.value.show({ model: 'success', text: '清除角色绑定成功' })
			setTimeout(function () {
				uni.navigateTo({
					url: `/pages/index/my`
				});
			}, 1500)
		}
	}

	function sqrq() {
		uni.navigateTo({
			url: '/pages/auth/auth'
		})
	}

	function upJzDetail() {
		uni.navigateTo({
			url: '/pages/jz/jzdetail'
		})
	}

	function upYhk() {
		uni.navigateTo({
			url: '/pages/my/yhk'
		})
	}



	function bsload() {
		uni.navigateTo({
			url: '/pages/my/bs'
		})
	}

	function jzload() {
		uni.navigateTo({
			url: '/pages/order/list'
		})
	}

	function bssksjap() {
		uni.navigateTo({
			url: '/pages/bs/kcsjap'
		})
	}

	function bsdetail() {
		uni.navigateTo({
			url: '/pages/bs/bsupdetail'
		})
	}

	function bssubject() {
		uni.navigateTo({
			url: '/pages/bs/bsbject'
		})
	}


	function backPage(e : any) {
		// console.log(JSON.stringify(e));
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>




<style>
	.my-bg {
		height: 16em;
		width: 100%;
		position: absolute;
		top: -1.5em;
		z-index: -1;
		overflow: hidden;
	}

	.my-bg image {
		width: 100%;
		height: 115%;
	}

	.text-center {
		text-align: center;
		font-size: 18px;
	}
</style>